<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form'
import {
  codeValidator,
  nameValidator,
} from '~/utils/form-validator.ts'
import type { RoleReq } from '~/api/setting/model/role.ts'
import { createRoleApi, modifyRoleApi } from '~/api/setting/role.ts'

const props = defineProps({
  roleData: Object,
  optType: {
    type: String,
    default: 'create',
  },
})

const emits = defineEmits(['onSaveSuccess'])

const message = useMessage()

const roleReq = ref<RoleReq>({
  roleName: undefined,
  roleCode: undefined,
  sort: 1,
  note: undefined,
})

const roleCreateFormRef = ref()
const rules: Record<string, Rule[]> = {
  roleName: [
    { required: true, message: '请输入角色名称' },
    { validator: nameValidator, trigger: 'blur' },
  ],
  roleCode: [
    { required: true, message: '请输入角色编码' },
    { validator: codeValidator, trigger: 'blur' },
  ],
  sort: [
    { required: true, message: '请输入排序' },
  ],
}

/**
 * 初始化角色
 */
async function init() {
  if (props.roleData) {
    roleReq.value = props.roleData
  }
}

const confirmLoading = shallowRef(false)

async function onSaveRole() {
  if (props.optType === 'create') {
    await onCreateRole()
  } else {
    await onEditRole()
  }
}

/**
 *  添加用户
 */
async function onCreateRole() {
  roleCreateFormRef.value
    .validate()
    .then(() => {
      confirmLoading.value = true
      createRoleApi(roleReq.value).then((response) => {
        const isCreate: boolean = response
        if (isCreate) {
          message.success('新建成功')
          emits('onSaveSuccess', 'create')
        }
      }).finally(() => {
        confirmLoading.value = false
        close()
      })
    })
    .catch((error) => {
      console.log('roleCreateFormRef::error', error)
    })
}

/**
 *  编辑用户
 */
async function onEditRole() {
  roleCreateFormRef.value
    .validate()
    .then(() => {
      confirmLoading.value = true
      modifyRoleApi(roleReq.value).then((response) => {
        const isCreate: boolean = response
        if (isCreate) {
          message.success('修改成功')
          emits('onSaveSuccess', 'edit')
        }
      }).finally(() => {
        confirmLoading.value = false
        close()
      })
    })
    .catch((error) => {
      console.log('roleCreateFormRef::error', error)
    })
}

onMounted(() => {
  init()
})
</script>

<template>
  <a-modal title="编辑角色" width="600px" :confirm-loading="confirmLoading" @ok="onSaveRole">
    <a-space direction="vertical" size="large" class="w-full">
      <a-form
        ref="roleCreateFormRef"
        :model="roleReq"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
        layout="horizontal"
      >
        <a-form-item name="roleName" label="角色名称">
          <a-input v-model:value="roleReq.roleName" placeholder="请输入角色名称" allow-clear />
        </a-form-item>
        <a-form-item name="roleCode" label="角色编码">
          <a-input v-model:value="roleReq.roleCode" placeholder="请输入角色编码" allow-clear />
        </a-form-item>
        <a-form-item name="sort" label="排序">
          <a-input-number v-model:value="roleReq.sort" placeholder="排序" allow-clear />
        </a-form-item>
        <a-form-item name="note" label="备注">
          <a-textarea
            v-model:value="roleReq.note"
            :rows="4"
            placeholder="请输入备注"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </a-space>
  </a-modal>
</template>

<style lang="less" scoped>
.avatar-uploader {
  .ant-upload {
    width: 128px;
    height: 128px;
  }
}

.avatar-uploader-img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
